import { message, Popconfirm } from 'antd'
import { FC, useCallback } from 'react'
import { QuestionCircleOutlined } from '@ant-design/icons'
import styled from 'styled-components'
import { deleteCategoryApi, getCategoryListApi } from '@/api/food'

const cate = require('@/assets/cate.png')
interface AppCommonProps {
  value: string,
  label: string,
  id: number,
  getList: () => []
}
const StyleAppCategoryItemContenier = styled.div`
.category-item{
width: 231px;
height: 101px;
background-image: url(${cate});
background-color: #fff;
margin: 20px;
position: relative;
&_center{
  text-align: center;
  line-height: 101px;
}
.del{
  position: absolute;
  width: 30px;
  height: 30px;
  right: 0px;
  top: 1px;
  font-weight: 800;
  text-align: center;
  visibility: inherit;
  cursor: pointer;
}
}
`
const AppCommonItem: FC<AppCommonProps> = (props) => {
  const { value, id, getList } = props
  const handleConfirm = useCallback(async (id: number) => {
    try {
      const data = await deleteCategoryApi(id)
      if(data){
        message.success('删除成功')
      }
      getList()
    } catch (error) {
      console.log(error)
    } finally{
      getCategoryListApi().then(res => res)
    }

  }, [id])
  return (
    <StyleAppCategoryItemContenier>
      <div className="category-item">
        <div className="category-item_center">
          {value}
        </div>
        <Popconfirm className="del"
          title="你确定要删除该类别吗？"
          onConfirm={() => handleConfirm(id)}
          okText="Yes"
          cancelText="No"
        >
          <a href="#">X</a>
        </Popconfirm>
      </div>
    </StyleAppCategoryItemContenier>
  )
}
export default AppCommonItem
